<template>
	<div class="hotconadd">
		<div class="title">
			<span>热点管理</span>
		</div>
		<p>描述<input type="text" v-model.lazy.trim="memo"></p>
		<p>热度<input type="text" v-model.lazy.trim="hot"></p>
		<p>类型<input type="text" v-model.lazy.trim="type"></p>
		<p>图片<input type="file" ref='pic'></p>
		<button @click="btn()">上传</button>
		<button @click="this.$router.push('/admin/hotcon')">返回</button>
		
	</div>
</template>

<script>
	export default{
		name:'Hotconadd',
		data(){
			return{
				memo:'123',
				hot:1,
				type:1,
				pic:''
			}
		},
		methods:{
			//有上传框需要打包成表单对象
			btn(){
				//上传框的value属性是files，被上传的文件具体信息
				let fs=this.$refs.pic.files	//获取到图片的数据
				let fd=new FormData()
				
				//判断是否有上传图片,且图片存在
				if(fs.length>0 && fs[0]!='' && this.memo!='' && this.hot!='' && this.type!=''){
					//将需要打包的数据 append方式提交给对象
					fd.append('memo',this.memo)	//将描述的值添加到表单对象中打包
					fd.append('hot',this.hot)
					fd.append('type',this.type)
					fd.append('pic',fs[0])
					this.axios.post('/api/adm/hot/addHot',fd,{
						header:{'Content-Type':'multipart/form-data'}
					}).then( (res)=>{
						if(res.data.code===200){
							this.$router.push('/admin/hotcon')
						}else{
							alert(res.data.msg)
						}
					} ).catch( (error)=>{
						console.log(error);
					} )
				}
			}
		}
	}
</script>

<style scoped>
	.title span{
		font-size: 23px;
		margin: auto;
		text-indent: 1em;
		height: 50px;
		width: 90%;
		display: block;
		line-height: 50px;
		border-bottom: 2px solid gainsboro;
		font-weight: bold;
	}
	p{
		text-indent: 1em;
		margin: 10px ;
		width: 50%;
		border-bottom: 1px dashed  gold  ;
		height: 40px;
		margin-bottom: 5px;
	}
	input{
		width: 300px;
		margin-top: 10px;
		margin-left: 15px;
	}
	.hotconadd button{
		height: 30px;
		border: none;
		border-radius: 11px;
		color: gold;
		background-color: red;
		margin-top: 10px;
		width: 100px;
		margin-left: 20px;
	}
	.hotconadd button:hover{
		cursor: pointer;
		background-image: url(../../../../public/bannerimg/10.jpg);
	}
</style>
